<template>
	<view class="address">
		<radio-group @change="changeValid">
			<view class="address-item" v-for="(item,index) in addressInfo" :key="index">
				<view class="right mr20rpx">
					<uni-icons type="closeempty" size="15" @tap="delAddress(item,index)"></uni-icons>
				</view>
				<view class="bottom-line">
					<view class="ml10rpx">
						{{item.username}},{{item.phone}}
					</view>
					<view class="ml10rpx">
						{{item.provinceName}} {{item.cityName}} {{item.regionName}}
						{{item.addressDetail}}
					</view>
				</view>

				<view class="address-footer">
					<view class="ml10rpx">
						<radio style="transform:scale(0.8)" :checked="item.valid==1" :value="String(index)"></radio>
						<text v-if="item.valid!=1">设为默认</text>
						<text v-else class="valid-color" >已设为默认</text>
					</view>
					<view class="right mr20rpx">
						<view class="btn mr20rpx" @tap="copy(item,index)">
							复制
						</view>
						<view class="btn" @tap="toAddressPage(`/pages/address/address?id=${item.id}`)">
							修改
						</view>
					</view>
				</view>
			</view>
		</radio-group>
		<view class="add-box-footer">
				<view class="add-btn" @tap="toAddressPage('/pages/address/address')">添加收货地址</view>
		</view>
	
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		reactive
	} from 'vue'
	const addressInfo = reactive([{
		id: 1,
		username: "张三",
		phone: "18888888888",
		provinceName: "江苏省",
		cityName: "南京市",
		regionName: "建邺区",
		addressDetail: "油坊桥76号",
		valid: 0
	}, {
		id: 1,
		username: "张三",
		phone: "18888888888",
		provinceName: "江苏省",
		cityName: "南京市",
		regionName: "建邺区",
		addressDetail: "油坊桥76号",
		valid: 0
	}, {
		id: 1,
		username: "张三",
		phone: "18888888888",
		provinceName: "江苏省",
		cityName: "南京市",
		regionName: "建邺区",
		addressDetail: "油坊桥76号",
		valid: 0
	}, {
		id: 1,
		username: "张三",
		phone: "18888888888",
		provinceName: "江苏省",
		cityName: "南京市",
		regionName: "建邺区",
		addressDetail: "油坊桥76号",
		valid: 0
	}, {
		id: 1,
		username: "张三",
		phone: "18888888888",
		provinceName: "江苏省",
		cityName: "南京市",
		regionName: "建邺区",
		addressDetail: "油坊桥76号",
		valid: 0
	}])

	/**
	 * 复制
	 */
	const copy = (item, index) => {
		const text = item.provinceName + item.cityName + item.regionName + item.addressDetail
		uni.setClipboardData({
			data: text,
		})
	}

	/**
	 * 设置默认值
	 */
	const changeValid = (e) => {47
		addressInfo.forEach(item=>{
			item.valid=0
		})
		addressInfo[parseInt(e.detail.value)].valid=addressInfo[parseInt(e.detail.value)]==1?0:1
		
		//TODO 设置默认值接口调用
		
		uni.showToast({
			title:"设置成功"
		})
		
	}
	/**
	 * 删除地址
	 */
	const delAddress = (item, index) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除么？',
			success: function(res) {
				if (res.confirm) {
					addressInfo.splice(index, 1)
					//TODO 删除调用
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	/**
	 * 去信息详情页
	 */
	const toAddressPage=(path)=>{
		uni.navigateTo({
			url:path
		})
	}
</script>

<style scoped>
	.address {
		background: #f7f7f7;
		height: 100vh;
	}

	.address-item {
		margin-top: 10rpx;
		background: #fff;
	}

	.bottom-line {
		line-height: 60rpx;
		border-bottom: 1px solid #eee;
	}

	.address-content {
		padding-bottom: 20rpx;
	}

	.address-footer {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx 0rpx 10rpx;
	}

	.btn {
		color: #484848;
		border: 1px solid #ddd;
		width: 70rpx;
		height: 40rpx;
		text-align: center;

	}

	.right {
		display: flex;
		justify-content: flex-end;
		flex-grow: 1;
	}

	.mr20rpx {
		margin-right: 20rpx;
	}

	.ml10rpx {
		margin-left: 20rpx;
	}

	.add-btn {
		flex: 1;
		text-align: center;
		background: #5555ff;
		color: #fff;
		padding: 10rpx;
		border-radius: 4px;
		margin: 10rpx;
	}
	.valid-color{
		color:#5555ff;
	}
	.add-box-footer{
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		flex: 1; 
	}
</style>